<template>
  <div class="review-form bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
      {{ editMode ? '编辑评论' : '发表评论' }}
    </h3>

    <form @submit.prevent="handleSubmit">
      <!-- 总体评分 -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          总体评分 <span class="text-red-500">*</span>
        </label>
        <RatingStars 
          v-model="formData.rating" 
          :interactive="true" 
          :show-value="true"
        />
      </div>

      <!-- 评论标题 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          评论标题（可选）
        </label>
        <input
          v-model="formData.title"
          type="text"
          maxlength="200"
          placeholder="简短总结您的体验"
          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
        />
      </div>

      <!-- 详细评论 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          详细评论 <span class="text-red-500">*</span>
        </label>
        <textarea
          v-model="formData.content"
          rows="5"
          maxlength="2000"
          placeholder="分享您的使用体验..."
          required
          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white resize-none"
        ></textarea>
        <div class="text-right text-sm text-gray-500 mt-1">
          {{ formData.content.length }} / 2000
        </div>
      </div>

      <!-- 多维度评分（可折叠） -->
      <div class="mb-6">
        <button
          type="button"
          @click="showAdvanced = !showAdvanced"
          class="flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline mb-2"
        >
          {{ showAdvanced ? '收起' : '展开' }}高级评分
          <svg 
            class="w-4 h-4 ml-1 transition-transform" 
            :class="{ 'rotate-180': showAdvanced }"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>

        <div v-if="showAdvanced" class="space-y-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700">
          <div>
            <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">性能</label>
            <RatingStars 
              v-model="formData.performanceRating" 
              :interactive="true" 
              :show-value="true"
            />
          </div>
          <div>
            <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">价格</label>
            <RatingStars 
              v-model="formData.priceRating" 
              :interactive="true" 
              :show-value="true"
            />
          </div>
          <div>
            <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">易用性</label>
            <RatingStars 
              v-model="formData.easeOfUseRating" 
              :interactive="true" 
              :show-value="true"
            />
          </div>
          <div>
            <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">文档质量</label>
            <RatingStars 
              v-model="formData.documentationRating" 
              :interactive="true" 
              :show-value="true"
            />
          </div>
        </div>
      </div>

      <!-- 使用背景信息 -->
      <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            使用场景
          </label>
          <select
            v-model="formData.useCase"
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
          >
            <option value="">请选择</option>
            <option value="个人项目">个人项目</option>
            <option value="团队协作">团队协作</option>
            <option value="企业级应用">企业级应用</option>
            <option value="学习研究">学习研究</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            团队规模
          </label>
          <select
            v-model="formData.teamSize"
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
          >
            <option value="">请选择</option>
            <option value="1人">1人</option>
            <option value="2-10人">2-10人</option>
            <option value="10-50人">10-50人</option>
            <option value="50+人">50+人</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            使用时长
          </label>
          <select
            v-model="formData.usageDuration"
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
          >
            <option value="">请选择</option>
            <option value="< 1个月">< 1个月</option>
            <option value="1-6个月">1-6个月</option>
            <option value="6-12个月">6-12个月</option>
            <option value="1年+">1年+</option>
          </select>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="flex justify-end gap-3">
        <button
          v-if="editMode"
          type="button"
          @click="$emit('cancel')"
          class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          取消
        </button>
        <button
          type="submit"
          :disabled="loading || !isValid"
          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {{ loading ? '提交中...' : editMode ? '更新评论' : '发表评论' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import RatingStars from './RatingStars.vue'
import type { Review } from '~/types'

const props = defineProps<{
  toolId: number
  editMode?: boolean
  initialData?: Partial<Review>
}>()

const emit = defineEmits<{
  submit: [data: any]
  cancel: []
}>()

const showAdvanced = ref(false)
const loading = ref(false)

const formData = ref({
  rating: 5,
  title: '',
  content: '',
  performanceRating: 0,
  priceRating: 0,
  easeOfUseRating: 0,
  documentationRating: 0,
  useCase: '',
  teamSize: '',
  usageDuration: '',
})

// 如果是编辑模式，加载初始数据
watch(() => props.initialData, (data) => {
  if (data && props.editMode) {
    formData.value = {
      rating: data.rating || 5,
      title: data.title || '',
      content: data.content || '',
      performanceRating: data.performanceRating || 0,
      priceRating: data.priceRating || 0,
      easeOfUseRating: data.easeOfUseRating || 0,
      documentationRating: data.documentationRating || 0,
      useCase: data.useCase || '',
      teamSize: data.teamSize || '',
      usageDuration: data.usageDuration || '',
    }
  }
}, { immediate: true })

const isValid = computed(() => {
  return formData.value.rating > 0 && formData.value.content.trim().length >= 10
})

const handleSubmit = async () => {
  if (!isValid.value) return

  loading.value = true
  try {
    const submitData = {
      toolId: props.toolId,
      ...formData.value,
      // 移除为0的可选评分
      performanceRating: formData.value.performanceRating || undefined,
      priceRating: formData.value.priceRating || undefined,
      easeOfUseRating: formData.value.easeOfUseRating || undefined,
      documentationRating: formData.value.documentationRating || undefined,
    }
    
    emit('submit', submitData)
    
    // 如果不是编辑模式，重置表单
    if (!props.editMode) {
      formData.value = {
        rating: 5,
        title: '',
        content: '',
        performanceRating: 0,
        priceRating: 0,
        easeOfUseRating: 0,
        documentationRating: 0,
        useCase: '',
        teamSize: '',
        usageDuration: '',
      }
      showAdvanced.value = false
    }
  } finally {
    loading.value = false
  }
}
</script>

